<template>
    <div class="echar-left">
        <div class="echar-title">
            <p>快捷入口</p>
        </div>
        <ul>
            <li>
                <div class="pic"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u652.svg" alt=""></div>
                <p>新增员工</p>
            </li>
            <li>
                <div class="pic" style="background-color: rgba(37, 97, 239, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u660.svg" alt=""></div>
                <p>打卡记录</p>
            </li>
            <li>
                <div class="pic" style="background-color: rgba(250, 116, 107, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u656.svg" alt=""></div>
                <p>审批</p>
            </li>
            <li>
                <div class="pic" style="background-color: rgba(255, 199, 28, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u664.svg" alt=""></div>
                <p>社保公积金</p>
            </li>
            <li>
                <div class="pic" style="    background-color: rgba(61, 212, 167, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u644.svg" alt=""></div>
                <p>候选人</p>
            </li>
            <li>
                <div class="pic" style="background-color: rgba(250, 116, 107, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u680.svg" alt=""></div>
                <p>会议室预定</p>
            </li>
            <li>
                <div class="pic" style="    background-color: rgba(108, 118, 244, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u672.svg" alt=""></div>
                <p>用车记录</p>
            </li>
            <li>
                <div class="pic" style="    background-color: rgba(61, 212, 167, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u668.svg" alt=""></div>
                <p>工资条</p>
            </li>
            <li>
                <div class="pic" style="    background-color: rgba(255, 199, 28, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u692.svg" alt=""></div>
                <p>公告</p>
            </li>
            <li>
                <div class="pic" style="background-color: rgba(37, 97, 239, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u684.svg" alt=""></div>
                <p>文档库</p>
            </li>
            <li>
                <div class="pic" style="    background-color: rgba(61, 212, 167, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u676.svg" alt=""></div>
                <p>新闻</p>
            </li>
            <li>
                <div class="pic" style="background-color: rgba(255, 199, 28, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u688.svg" alt=""></div>
                <p>资产</p>
            </li>
            <li>
                <div class="pic" style="    background-color: rgba(108, 118, 244, 0.2);"><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u648.svg" alt=""></div>
                <p>绩效</p>
            </li>
            
        </ul>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.echar-left{
    padding: 20px 15px 0;
    width: 310px;
    height: 525px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(242, 242, 242, 1);
    border-radius: 8px;
    .echar-title{
        padding: 0 8px;
        box-sizing: border-box;
        p{
            text-align: left;
        }
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            min-width: 60px;
            margin-top: 40px;
            text-align: center;
            .pic{
                width: 44px;
                height: 44px;
                margin: 0 auto;
                background: inherit;
                background-color: rgba(255, 199, 28, 0.2);
                border: none;
                border-radius: 12px;
                color: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            p{
                margin-top: 5px;
                font-weight: 400;
                font-style: normal;
                font-size: 12px;
                
            }
        }
    }
}
ul li:nth-child(4n){
    margin-right: 0;
}
</style>